<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button-group>
        <el-button type="primary" v-if="menuManager_btn_add" icon="plus" @click="handlerAdd">{{$t('button.add')}}</el-button>
        <el-button type="primary" v-if="menuManager_btn_edit" icon="edit" @click="handlerEdit">{{$t('button.edit')}}</el-button>
        <el-button type="primary" v-if="menuManager_btn_del" icon="delete" @click="handleDelete">{{$t('button.delete')}}</el-button>
      </el-button-group>
    </div>

    <el-row>
      <el-col :span="7" style='margin-top:15px;margin-right:10px'>
        <el-card class="box-card">
          <el-input
            :placeholder="$t('menu.filterText')"
            v-model="filterText">
          </el-input>
          <el-tree
            class="filter-tree"
            :data="treeData"
            node-key="id"
            highlight-current
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="menuTree"
            @node-click="getNodeData"
            default-expand-all
          >
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="16" style='margin-top:15px;'>
        <el-card class="box-card">
          <el-form :label-position="labelPosition" label-width="100px" :model="form" ref="form">
            <el-form-item :label="$t('menu.code')" prop="code">
              <el-input v-model="form.code" :disabled="formEdit" :placeholder="$t('menu.enterPathCode')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.titleCh')" prop="title">
              <el-input v-model="form.title" :disabled="formEdit"  :placeholder="$t('menu.enterTitle')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.titleCh')" prop="title">
              <el-input v-model="form.titleCh" :disabled="formEdit"  :placeholder="$t('menu.enterTitle')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.titleTc')" prop="title">
              <el-input v-model="form.titleTc" :disabled="formEdit"  :placeholder="$t('menu.enterTitle')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.titleUs')" prop="title">
              <el-input v-model="form.titleUs" :disabled="formEdit"  :placeholder="$t('menu.enterTitle')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.parentId')" prop="parentId">
              <el-input v-model="form.parentId" :disabled="formEdit" :placeholder="$t('menu.enterParentId')" readonly></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.icon')" prop="icon">
              <el-input v-model="form.icon" :disabled="formEdit" :placeholder="$t('menu.enterIcon')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.href')" prop="href">
              <el-input v-model="form.href" :disabled="formEdit" :placeholder="$t('menu.enterHref')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.orderNum')" prop="orderNum">
              <el-input v-model="form.orderNum" :disabled="formEdit" :placeholder="$t('menu.enterorderNum')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.description')"   prop="description">
              <el-input v-model="form.description" :disabled="formEdit" :placeholder="$t('menu.enterDescription')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.attr1')"   prop="attr1">
              <el-input v-model="form.attr1" :disabled="formEdit" :placeholder="$t('menu.enterDescription')"></el-input>
            </el-form-item>
            <el-form-item v-if="formStatus == 'update'">
              <el-button type="primary" @click="update">{{$t('button.change')}}</el-button>
              <el-button @click="onCancel">{{$t('button.cancel')}}</el-button>
            </el-form-item>
            <el-form-item v-if="formStatus == 'create'">
              <el-button type="primary" @click="create">{{$t('button.preserve')}}</el-button>
              <el-button @click="onCancel">{{$t('button.cancel')}}</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="box-card" style='margin-top:15px;'>
          <span>{{$t('menu.buttonOrResource')}}</span>
          <menu-element :menuId='currentId' ref="menuElement"></menu-element>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    fetchTree, getObj, addObj, delObj, putObj
  } from '@/api/admin/menu/index';
  import { mapGetters } from 'vuex';
  export default {
    components: {
      'menu-element': () => import('./components/menuElement')
    },
    data() {
      return {
        filterText: '',
        list: null,
        total: null,
        formEdit: true,
        formAdd: true,
        formStatus: '',
        showElement: false,
        listQuery: {
          name: undefined
        },
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        labelPosition: 'right',
        form: {
          code: undefined,
          title: undefined,
          titleCh: undefined,
          titleTc: undefined,
          titleUs: undefined,
          parentId: undefined,
          href: undefined,
          icon: undefined,
          orderNum: undefined,
          description: undefined,
          path: undefined,
          enabled: undefined,
          attr1: undefined
        },
        currentId: -1,
        menuManager_btn_add: false,
        menuManager_btn_edit: false,
        menuManager_btn_del: false
      }
    },
    watch: {
      filterText(val) {
        this.$refs.menuTree.filter(val);
      }
    },
    created() {
      this.getList();
      this.menuManager_btn_add = this.elements['menuManager:btn_add'];
      this.menuManager_btn_del = this.elements['menuManager:btn_del'];
      this.menuManager_btn_edit = this.elements['menuManager:btn_edit'];
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
      getList() {
        fetchTree(this.listQuery).then(data => {
          this.treeData = data;
        });
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      getNodeData(data) {
        if (!this.formEdit) {
          this.formStatus = 'update';
        }
        getObj(data.id).then(response => {
          this.form = response.data;
        });
        this.currentId = data.id;
        this.showElement = true;
        this.$refs.menuElement.menuId = data.id;
        this.$refs.menuElement.getList();
      },
      handlerEdit() {
        if (this.form.id) {
          this.formEdit = false;
          this.formStatus = 'update';
        }
      },
      handlerAdd() {
        this.resetForm();
        this.formEdit = false;
        this.formStatus = 'create';
      },
      handleDelete() {
        this.$confirm(this.$t('tips.permanentDelete'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('tips.determine'),
          cancelButtonText: this.$t('tips.cancel'),
          type: 'warning'
        }).then(() => {
          delObj(this.currentId).then(() => {
            this.getList();
            this.resetForm();
            this.onCancel();
            this.$notify({
              title: this.$t('tips.success'),
              message: this.$t('tips.deleteSuccess'),
              type: 'success',
              duration: 2000
            });
          });
        });
      },
      update() {
        putObj(this.form.id, this.form).then(() => {
          this.getList();
          this.$notify({
            title: this.$t('tips.success'),
            message: this.$t('tips.updateSuccess'),
            type: 'success',
            duration: 2000
          });
        });
      },
      create() {
        addObj(this.form).then(() => {
          this.getList();
          this.$notify({
            title: this.$t('tips.success'),
            message: this.$t('tips.addSuccess'),
            type: 'success',
            duration: 2000
          });
        });
      },
      onCancel() {
        this.formEdit = true;
        this.formStatus = '';
      },
      resetForm() {
        this.form = {
          code: undefined,
          title: undefined,
          parentId: this.currentId,
          href: undefined,
          icon: undefined,
          orderNum: undefined,
          description: undefined,
          path: undefined,
          enabled: undefined
        };
      }
    }
  }
</script>

